<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>底部预约横幅</title>
</head>

<body>


  代码来源： https://www.growthman.cn/about

  <div class="foot_par">
    <div class="foot_par_box">
      <div class="foot_par_con">
        <div class="c-item">
          <img class="c-book" src="./images/book.png" alt="book" />
        </div>
        <div class="c-item">
          <p class="c-title">免费获取《2022数字营销白皮书》</p>
          <p class="c-text">扫描二维码 回复【数字营销】免费获取</p>
        </div>
        <div class="c-item">
          <img class="c-code" src="./images/code.svg" alt="code" />
          <p class="c-text2">扫码获取</p>
        </div>
      </div>
    </div>
  </div>
  <style>
    .foot_par {
      margin: 80px 0;
    }

    .foot_par_box {
      position: relative;
      padding: 0 1.6rem;
      height: 100%;
      margin-top: 80px;
    }

    @media screen and (max-width: 767px) {
      .foot_par_box {
        margin-top: 0;
      }
    }

    @media screen and (max-width: 767px) {
      .foot_par_box {
        padding: 0;
      }
    }

    .foot_par_con {
      width: 100%;
      padding: 20px 90px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: url(./images/b_bj.png) no-repeat center/cover;
    }

    @media screen and (max-width: 1599px) {
      .foot_par_con {
        padding: 20px 50px;
      }
    }

    @media screen and (max-width: 991px) {
      .foot_par_con {
        padding: 20px 30px;
      }
    }

    @media screen and (max-width: 767px) {
      .foot_par_con {
        padding: 1rem;
      }
    }

    /*三段内容*/

    /*左边图片*/
    .foot_par_con .c-item:nth-child(1),
    .foot_par_con .c-item:nth-child(3) {
      flex-shrink: 0;
    }

    .foot_par_con .c-book {
      margin: -0.7rem 0 -0.5rem;
      width: 1.8rem;
    }

    @media screen and (max-width: 767px) {
      .foot_par_con .c-book {
        margin: 0;
        width: 2.6rem;
      }
    }

    /*中间文本*/
    .foot_par_con .c-item:nth-child(2) {
      padding-left: 0.7rem;
      width: 100%;
    }

    .foot_par_con .c-title {
      margin-bottom: 0.2rem;
      font-weight: bold;
      font-size: 24px;
      color: #fff;
      line-height: 34px;
    }

    .foot_par_con .c-text {
      font-size: 16px;
      color: #fff;
      line-height: 1;
    }

    /*右边二维码*/

    .foot_par_con .c-item:nth-child(3) {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 5px;
      padding: 10px;
    }

    @media screen and (max-width: 767px) {
      .foot_par_con .c-item:nth-child(3) {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.4rem;
        width: 3rem;
      }
    }

    .foot_par_con .c-code {
      width: 100px;
    }

    @media screen and (max-width: 1279px) {
      .foot_par_con .c-code {
        width: 74px;
      }
    }

    @media screen and (max-width: 767px) {
      .foot_par_con .c-code {
        width: 100%;
      }
    }

    .foot_par_con .c-item:nth-child(3) .c-text2 {
      margin-left: 10px;
      width: 16px;
    }

    @media screen and (max-width: 767px) {
      .foot_par_con .c-item:nth-child(3) .c-text2 {
        width: 100%;
        margin-left: 0;
        margin-top: 0.2rem;
        font-size: 0.5rem;
        text-align: center;
      }
    }

    /*额外*/
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      font-family: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI",
        "WenQuanYi Micro Hei", "Arial", "sans-serif", \5b8b\4f53;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
      background: #fff;
    }

    @media screen and (max-width: 1279px) {
      body {
        font-size: 12px;
      }
    }

    @media screen and (max-width: 767px) {
      body {
        font-size: 0.9216rem;
      }
    }

    html {
      font-size: calc(100vw / 19.2);
    }
  </style>
</body>

</html>